<template>
  <div>
      <div class="logoBox">
          <img src="../assets/logo2.png" class="logo">
      </div>
      <div class="nav">
          <a class="nav-item" @click="goSearch=!goSearch">搜索</a>
          <a class="nav-item" id="categorise" @mouseover="showcategorise=!showcategorise" @mouseout="showcategorise=!showcategorise">分類</a>
          <a class="nav-item" @click="gocart">購物車</a>
          <a class="nav-item" @click="isLogin=!isLogin">登錄</a>
          <a class="nav-item" @click="isRegister=!isRegister">註冊</a>
      </div>
      <transition name="fade" mode="out-in">
          <div v-show="goSearch" class="searchBox">
              <select name="search" v-model="selectIndex" class="selectBox" >
                <option value="0">書名</option>
                <option value="1">作者</option>
            </select>
            <input type="text"  class="search" @keyup.enter="gosearch" v-model="search">
          </div>
      </transition>
      <transition name="fade" mode="out-in">
          <div class="categorise pointer" v-show="showcategorise" @mouseover="showcategorise=!showcategorise" @mouseout="showcategorise=!showcategorise">
            <router-link to="/list/0/all" tag="a">全部书籍</router-link>
            <router-link to="/list/2/literatrue" tag="a">文学</router-link>
            <router-link to="/list/2/education" tag="a">教育</router-link>
            <router-link to="/list/2/technology" tag="a">科技</router-link>
            <router-link to="/list/2/economic" tag="a">经济管理</router-link> 
            <router-link to="/list/2/humanity" tag="a">人文社科</router-link>                   
            <router-link to="/list/2/life" tag="a">生活</router-link>
            <router-link to="/list/2/motivation" tag="a">励志</router-link>
        </div>
      </transition>
      <transition name="fade" mode="out-in">
          <login v-show="isLogin||isRegister" @close="close()" :isLogin="isLogin" :isRegister="isRegister"></login>
      </transition>
      
  </div>
</template>
<style scoped>
    .logoBox{
        width: 100%;
        text-align: center;
    }
    .logo{
        width: 60%;
        max-width: 300px;
    }
    .nav{
        width: 80%;
        margin: 0 auto;
        margin-top: -10px;
        text-align: center
    }
    .nav-item{
        display:inline-block;
        text-decoration: none;
        width: 1.2em;
        font-size: 1em;
        color: #858585;
        word-wrap: break-word;
        margin:auto 5%;
        padding-top: 1em;
        padding-bottom: 3em;
        border-top: #fff solid 1px;
        text-align: center;
        vertical-align: top;
        cursor: pointer;
    }
    .nav-item:hover{
        border-top: dimgrey solid 1px;
        color: black;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        transition: all .25s ease;
    }
    .searchBox{
        display: flex;
        justify-content:center;
        position: absolute;
        left: 0;right: 0;
        width: 80%;
        max-width: 530px;
        margin: 0 auto;
    }
    .selectBox{
        width: 19%;
        max-width: 80px;
        height: 34px;
        padding-left: .7em;
        border:solid lightgrey 1px;
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        background:url('../assets/select.png') no-repeat 98%
    }
    .search{
        width: 65%;
        height: 30px;
        border: none;
        border:solid lightgrey 1px;
        /* border-radius: 10px; */
        background:url('../assets/search.png') no-repeat 2% 50%;
        padding-left: 40px;
    }
    .categorise{
        position: relative;
        top: -3.6em;
        width: 50%;
        margin: 1.2em auto;
        text-align: center;
        padding: 1%;
        background-color: #EAEAEA;
    }
    .categorise:after{
        content: " ";
        position: absolute;
        height: 0;
        width: 0;
        border: solid transparent;
        pointer-events: none;
        border-width: 10px;
    }
    .categorise a{
        display: inline-block;
        text-decoration: none;
        color: #555;
        cursor: pointer;
        font-size: .85em;
        padding:1em;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        transition: all .25s ease;
    }
    .categorise a:hover{
        background-color: black;
        color: #fff
    }
    .pointer:after {
        margin-left: -16px;
        border-bottom-color: #EAEAEA;
        top: -20px;
        left: 30%;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .35s ease;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>
<script>
import axios from "axios"
import login from "../components/login"
export default {
  data(){
      return{
          goSearch:false,
          showcategorise:false,
          selectIndex:0 ,
          search:'',
          isLogin:false ,
          isRegister:false 
      }
  },
  components:{
      login
  },
  mounted(){
    //   localStorage.removeItem('Booktoken')
  },
  methods:{
      gosearch(){
        if(this.selectIndex==0){
            this.$router.push('/list/0'+ this.search)
        }else{
            this.$router.push('/list/1'+ this.search)
        }    
      },
      gocart(){
          this.$router.push('/cart')
      },
      close(){
          this.isLogin=false;
          this.isRegister=false
      }
  }
}
</script>

